<template>
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<!-- <view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh"> -->
		<hx-navbar :title="headname" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="collect_box">
			<view class="collect_name" :style="{'color': (ktheme == 'purple' ? '#7F37D3': '#ffffff')}">{{headname}}
			</view>
			<view class="collect_name" :style="{'color': (ktheme == 'purple' ? '#7F37D3': '#ffffff')}">总计：{{numVal}}个
			</view>
			<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
				:style="{'color': (ktheme == 'purple' ? '#7F37D3': '#F6D9A9')}">
				<view class="" style="margin:18rpx  30rpx 0 0" v-for="(item,index) in selData">
					#{{item}}
				</view>
			</view>

			<view class="" style="height: 515rpx;"> </view>

		</view>
		<view class="batch" style="" :style="{'background': (ktheme == 'purple' ? '#ffffff': '#000000')}">
			<view class="batch_cont">
				<view class="batch_name" :style="{'color': (ktheme == 'purple' ? '#000000': '#ffffff')}">售卖价：</view>
				<input type="number" value="" v-model="numberValue" placeholder="输入售卖价"
					:class="[{'order_number_border_black':ktheme =='black'},{'order_number__border_purple':ktheme =='purple'}]"
					:style="[{'background:#000000':ktheme=='black'}]" />
			</view>
			<view class="" style="font-size: 28rpx;color: #F90808;" >*限价：{{lowPrice}}元~{{highPrice}}元之间 </view>
			<view class="" style="height:100rpx;margin: 0 auto ;">
				<view class="btntk" @tap="batchSell" :style="{background:kbuttonBgColor}">
					批量寄售
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<uni-popup ref="confirmDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
			<view class="store-view store-border-all tips-padding"
				:style="{'background':kbackgroundColor,color:knormalColor}"
				:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title">确定寄售</text>
				<view class="popup-subtitle">
					<view class="">
							确定批量寄售{{numVal}}个
					</view>
					<view class="">
						{{headname}}
					</view>
				<view class="">
				售价格全部设定为：<text :style="{'color': (ktheme == 'purple' ? '#7F37D3': '#F6D9A9')}" style="font-weight: bold;font-size: 34rpx;">{{numberValue}}</text>元？	
				</view>
				</view>
				<view class="gf" @click="selSell" :style="{'color': (ktheme == 'purple' ? '#7F37D3': '#F6D9A9')}">
					查看寄售商品详情 >>
				</view>
				<view class="tips-bottom">
					<view class="tips-button"
						:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
						@click="colfirmClose()">关闭</view>
					<view class="tips-button" :style="{background:kbuttonBgColor}" @click="confirmCheck()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<paypass ref="passbox" @confirm="set_done"></paypass>

	</view>
</template>

<script>
	import paypass from '@/components/pay_pass/pay_pass.vue'
	export default {
		components: {
			paypass
		},
		data() {
			return {
				 
				type: 1,
				numberValue: '',
				headname: '',
				numVal: "",
				selData: [],
				selNfidData:[],
				confimPopup: '',
				highPrice:"",
				lowPrice:""
			}
		},
		onLoad(val) {
		 
			this.headname = val.name + '版权商品'
			this.selData = val.selectData.split(',')
			this.numVal = this.selData.length
			this.selNfidData=val.selNfidData.split(',')
		    this.lowPrice=val.lowPrice
		    this.highPrice=val.highPrice
		},
		methods: {
			sale: function(pass) {
				console.log("pass--",pass);
				let data = {
					nftId: this.id,
					price: this.numberValue * 100,
					secondPassword: pass,
					payWay: 2,
					nftIds:this.selNfidData
				}
				this.$api.sale(data, res => {
					if (res.status) {
						this.$common.successToShow("寄售成功", () => {
							uni.navigateBack({
								delta: 2 // 返回上两级页面  
							}); 
						});
					} else {
						this.$common.errorToShow(res.message, () => {})
					}
				})

			},
			set_done: function(pass) {
				if (this.type == 1) {
					this.sale(pass)
				}
			},
			colfirmClose() {
				this.$refs.confirmDialog.close()
			},
			confirmCheck() {
				this.$refs.confirmDialog.close()
					this.$api.checkSecondPassword({}, res => {
						if (res.status) {
							let data = res.data
							if (data.secondPassword) {
								this.$refs.passbox.open();
							} else {
								this.$common.errorToShow('请设置交易密码', () => {
									uni.navigateTo({
										url: '/pages/user/settings/pay_pass/pay_pass'
									})
								});
							}
						} else {
							this.$common.errorToShow('网络异常');
						}
					})
			},
			batchSell() {
				var numberValue=parseInt(this.numberValue)
				var highPrice=parseInt(this.highPrice)
				var lowPrice=parseInt(this.lowPrice)
				if (this.numberValue == '') {
					this.$common.errorToShow('请输入售卖价格')
					this.$refs.confirmDialog.close()
					//this.numberValue > this.highPrice || this.numberValue < this.lowPrice  22
				}else if(numberValue > highPrice ||  numberValue < lowPrice){
						this.$common.errorToShow('最大不能超过'+ this.highPrice +'，最小不能低于'+this.lowPrice)
				}else {
				this.$refs.confirmDialog.open()
				}
			},
			selSell() {
				uni.navigateBack({
					delta:1 // 返回上1级页面  
				}); 
			}
		}
	}
</script>

<style scoped lang="scss">
	.collect_box {
		width: 100%;
		padding: 30rpx 30rpx 62rpx 30rpx;
	}

	.collect_name {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		text-align: left;
		font-style: normal;
		margin: 20rpx 0;
	}

	.batch {
		height: 505rpx;
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 20rpx 30rpx 62rpx 30rpx;

		.batch_name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			text-align: left;
			font-style: normal;
		}

	}

	/deep/ .uni-input-input {
		color: #c7c7c7;
		padding-left: 20rpx;
	}

	/deep/.uni-input-placeholder {
		color: #c7c7c7;
		padding-left: 20rpx;
	}

	.batch_cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: 690rpx;
		margin: 10rpx auto;
	}

	.order_number_border_black {
		width: 507rpx;
		height: 72rpx;
		margin: 20rpx auto;
		border-radius: 8px;
		padding: 14rpx;
		border: 4rpx solid #F6D9A9;
	}

	.order_number__border_purple {
		border-radius: 20rpx;
		border: 2rpx solid #dfdfdf;
		width: 507rpx;
		height: 72rpx;
		margin: 20rpx auto;
	}

	.btntk {
		width: 582rpx;
		height: 80rpx;
		margin: 50rpx auto;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: black;
		font-weight: 400;
	}

	.gf {
		margin: 20rpx auto;
		text-align: center;
		height: 36rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		line-height: 36rpx;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;


	}
	.popup-title{
		font-weight: 500;
		font-size: 34rpx;
	}
	.popup-subtitle{
		font-weight: 400;
		font-size: 30rpx;
	}
</style>